<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, user-scalable=no,
     initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
    <title>携程移动端</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/index.css">
</head>

<body>
    <!-- 顶部搜索 -->
    <div class="search-index">
        <div class="search">搜索：目的地/酒店/景点/航班号</div>
        <a href="#" class="user">我 的</a>
    </div>
    <!-- 焦点图模块 -->
    <div class="focus">
        <img src="upload/focus.jpg" alt="">
    </div>

    <!-- 局部导航栏 -->

    <div class="main-nav-wrap">
        <!-- 酒店 -->
        <div class="nav-list">
            <div class="nav-list-box nav-hotel fillet-1">
                <a href="#">
                    <span class="local-nav-icon1"></span>
                    <span style="color: #fff;">酒店</span>
                </a>
            </div>
            <div class="nav-list-box nav-hotel">
                <a href="#">
                    <span class="local-nav-icon-icon2"></span>
                    <span>民宿/客栈</span>
                </a>
            </div>
            <div class="nav-list-box nav-hotel fillet-3">
                <a href="#">
                    <span class="local-nav-icon-icon3"></span>
                    <span>特价/爆款</span>
                </a>
            </div>
        </div>
        <!-- 航班 -->
        <div class="nav-list">
            <div class="nav-list-box nav-flight">
                <a href="#">
                    <span class="local-nav-icon-icon4"></span>
                    <span style="color: #fff;">机票</span>
                </a>
            </div>
            <div class="nav-list-box nav-flight">
                <a href="#">
                    <span class="local-nav-icon-icon5"></span>
                    <span>接送机/包车</span>
                </a>
            </div>
            <div class="nav-list-box nav-flight">
                <a href="#">
                    <span class="local-nav-icon-icon6"></span>
                    <span>航班助手</span>
                </a>
            </div>
        </div>
        <!-- 火车 -->
        <div class="nav-list">
            <div class="nav-list-box nav-train">
                <a href="#">
                    <span class="local-nav-icon-icon7"></span>
                    <span style="color: #fff;">火车票</span>
                </a>
            </div>
            <div class="nav-list-box nav-train">
                <a href="#">
                    <span class="local-nav-icon-icon8"></span>
                    <span>汽车/船票</span>
                </a>
            </div>
            <div class="nav-list-box nav-train">
                <a href="#">
                    <span class="local-nav-icon-icon9"></span>
                    <span>租车</span>
                </a>
            </div>
        </div>
        <!-- 旅行 -->
        <div class="nav-list">
            <div class="nav-list-box nav-travel">
                <a href="#">
                    <span class="local-nav-icon-icon10"></span>
                    <span style="color: #fff;">旅游</span>
                </a>
            </div>
            <div class="nav-list-box nav-travel">
                <a href="#">
                    <span class="local-nav-icon-icon11"></span>
                    <span>门票/活动</span>
                </a>
            </div>
            <div class="nav-list-box nav-travel">
                <a href="#">
                    <span class="local-nav-icon-icon12"></span>
                    <span>周边游</span>
                </a>
            </div>
        </div>
        <!-- 攻略 -->
        <div class="nav-list">
            <div class="nav-list-box nav-gs fillet-2">
                <a href="#">
                    <span class="local-nav-icon-icon13"></span>
                    <span style="color: #fff;">攻略/景点</span>
                </a>
            </div>
            <div class="nav-list-box nav-gs">
                <a href="#">
                    <span class="local-nav-icon-icon14"></span>
                    <span>美食</span>
                </a>
            </div>
            <div class="nav-list-box nav-gs fillet-4">
                <a href="#">
                    <span class="local-nav-icon-icon15"></span>
                    <span>购物/免税</span>
                </a>
            </div>
        </div>
    </div>

    <!-- 导航栏转换按钮 -->
    <div class="nav-switch">
        <span class="nav-switch-box"></span>
        <span class="nav-switch-box2"></span>
    </div>

    <!-- 内容模块 -->
    <article>
        <div class="article-banner">
            <a href="#">
                <span><img src="images/直播.png" alt=""></span>
                <span class="banner-txet">特价好货直播中</span>
            </a>
            <div class="banner-bottom">
                <div class="banner-bottom-box">
                    <div class="tag">酒店套餐</div>
                    <img src="upload/banner-1.jpg" alt="">
                    <div class="mask">上海浦东香格里拉大酒店1晚</div>
                </div>
            </div>
            <div class="banner-txet-bottom">
                <div class="price-1">¥ 1206</div>
                <div class="price-2">
                    <!-- s 加删除线 -->
                    <s>2216</s>
                </div>
                <div class="price-3">立减￥1010</div>
            </div>
        </div>
        <div class="article-banner">
            <a href="#">
                <span><img src="images/精选.png" alt=""></span>
                <span class="banner-txet">权威排行榜</span>
            </a>
            <div class="banner-bottom">
                <div class="banner-bottom-box">
                    <div class="tag">精品推荐</div>
                    <img src="upload/banner-2.jpg" alt="">
                    <div class="mask">南京圣和府邸豪华精选酒店2晚</div>
                </div>
            </div>
            <div class="banner-txet-bottom">
                <div class="price-1">¥ 1699</div>
                <div class="price-2">
                    <!-- s 加删除线 -->
                    <s>3588</s>
                </div>
                <div class="price-3">立减￥1889</div>
            </div>
        </div>
    </article>

    <!-- banner图 -->
    <section>
        <div class="banner-3">
            <img src="upload/banner-3.jpg" alt="">
        </div>
    </section>
    <!-- 内容模块 -->
    <article>
        <div class="article-banner">
            <a href="#">
                <span><img src="images/直播.png" alt=""></span>
                <span class="banner-txet">特价好货直播中</span>
            </a>
            <div class="banner-bottom">
                <div class="banner-bottom-box">
                    <div class="tag">酒店套餐</div>
                    <img src="upload/banner-1.jpg" alt="">
                    <div class="mask">上海浦东香格里拉大酒店1晚</div>
                </div>
            </div>
            <div class="banner-txet-bottom">
                <div class="price-1">¥ 1206</div>
                <div class="price-2">
                    <!-- s 加删除线 -->
                    <s>2216</s>
                </div>
                <div class="price-3">立减￥1010</div>
            </div>
        </div>
        <div class="article-banner">
            <a href="#">
                <span><img src="images/精选.png" alt=""></span>
                <span class="banner-txet">权威排行榜</span>
            </a>
            <div class="banner-bottom">
                <div class="banner-bottom-box">
                    <div class="tag">精品推荐</div>
                    <img src="upload/banner-2.jpg" alt="">
                    <div class="mask">南京圣和府邸豪华精选酒店2晚</div>
                </div>
            </div>
            <div class="banner-txet-bottom">
                <div class="price-1">¥ 1699</div>
                <div class="price-2">
                    <!-- s 加删除线 -->
                    <s>3588</s>
                </div>
                <div class="price-3">立减￥1889</div>
            </div>
        </div>
    </article>

    <!-- 标签栏模块 -->
    <div class="label-box">
        <!-- 首页 -->
        <div class="label-sz page">
            <div class="icon-page"></div>
            <span>首页</span>
        </div>
        <!-- 社区 -->
        <div class="label-sz ">
            <div class="icon-area"></div>
            <span>社区</span></div>
        <!-- 消息 -->
        <div class="label-sz">
            <div class="icon-news"></div>
            <span>消息</span></div>
        <!-- 我的 -->
        <div class="label-sz">
            <div class="icon-my"></div>
            <span>我的</span></div>
    </div>
</body>

</html>